<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test</title>
	<style>
		.tab-header>div {
			cursor:pointer;
			float: left;
			padding:10px 30px;
			border: 1px solid #ccc;
		}
		.tab-header>div:hover,.tab-header>div.on {
			color: #e55;
		}
		.tab-header:after {
			display: block;
			content: '';
			clear: both;
		}
		.tab-cnt>div {
			display: none;
		}
		.tab-cnt>div.on {
			display: block;
		}
	</style>
</head>
<body>
	
	<div class="tab-header">
		<div class="service-notice" data-url="/about/ajax/getWebNotice">服务公告</div>
		<div class="item-day-notice" data-url="/about/ajax/getExpireNotice">项目到期公告</div>
	</div>
	<div class="tab-cnt">
		<div class="service"></div>
		<div class="item-day"></div>
	</div>


	<script src="lib/jquery-2.2.4.min.js"></script>
	<script>
		$(function() {
			var $tab_header = $('.tab-header>div');
			var $tan_cnt = $('.tab-cnt');
			$tab_header.on('click',function() {
				var $this = $(this);
				var ajax_url = $this.data('url');
				getAjax(ajax_url,{page:1},function(res) {
					console.log(res);
				})
			})


			function getAjax (url,params,callback) {
				$.ajax({
					url:url,
					data:params,
					success:function(res) {
						callback(res);
					},
					fail:function(xhr) {
						console.log('ajax err');
					}
				})
			}
		})
	</script>
</body>
</html>